<template>
  <div class="container">
    <!--筛选条件-->
    <div class="chooseSel">
      <div class="search">
        <el-input size="mini" v-model="txtKey" style="width: 30%" placeholder="请输入企业名称"></el-input>
        <el-input size="mini" v-model="company_phone" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入手机号" style="width: 12%; margin: 0 10px 0 10px" maxlength="20"></el-input>
        <el-button size="mini" type="primary" @click="searchBtn()"><i class="el-icon-search" style="margin-right: 5px"></i>搜索</el-button>
      </div>
      <ul>
        <li class="hidden">
          <h3>行业分类：</h3>
          <dl class="industryClassList">
            <dd v-for="(item, index) in comBaseData.first_class" :key="index" :class="iCisactive == index ? 'active' : ''" @click="addChoose('industryClass', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
          <!--<p><i class="el-icon-caret-bottom" @click="highToggleIndustryClass()"></i></p>-->
        </li>
        <li>
          <h3>所在地区：</h3>
          <dl class="addressList">
            <dd v-for="(item, index) in comBaseData.sheng" :key="index" :class="addRessIsactive == index ? 'active' : ''" @click="addChoose('address', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
          <!--<p><i class="el-icon-caret-bottom" @click="showAddress($event)"></i></p>-->
        </li>
        <li v-show="hiddenCity">
          <h3>所在市级：</h3>
          <dl class="areaCities">
            <dd v-for="(item, index) in areaCitiesDate" :key="index" :class="addCityactive == index ? 'active' : ''" @click="addChoose('areaCities', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <div class="advanced_screen">
          <li>
            <h3>高级筛选：</h3>
            <dl>
              <dt>成立年限</dt>
              <el-radio-group size="mini" v-model="searchParma.register_num" @change="addChoose('registerNum')">
                <el-radio :label="item" v-for="(item, index) in comBaseData.register_num" :key="index">{{ item }}</el-radio>
              </el-radio-group>
            </dl>
            <p><i class="el-icon-caret-top" @click="highToggle()"></i></p>
          </li>
          <div class="advanced_screen_c" v-show="isShowAdvanced">
            <li>
              <h3></h3>
              <dl>
                <dt>注册资本</dt>
                <el-radio-group size="mini" v-model="searchParma.register_cap" @change="addChoose('registerCap')">
                  <el-radio :label="item" v-for="(item, index) in comBaseData.register_cap" :key="index">{{ item }}</el-radio>
                </el-radio-group>
              </dl>
            </li>
            <li>
              <h3></h3>
              <dl>
                <dt>经营状态</dt>
                <el-radio-group size="mini" v-model="searchParma.opera_sts" @change="addChoose('operaSts')">
                  <el-radio :label="item" v-for="(item, index) in comBaseData.opera_sts" :key="index">{{ item }}</el-radio>
                </el-radio-group>
              </dl>
            </li>
            <li>
              <h3></h3>
              <dl>
                <dt>公司类型</dt>
                <el-radio-group size="mini" v-model="searchParma.company_type" @change="addChoose('companyType')">
                  <el-radio :label="item" v-for="(item, index) in comBaseData.company_type" :key="index">{{ item }}</el-radio>
                </el-radio-group>
              </dl>
            </li>
            <li>
              <h3></h3>
              <dl>
                <dt>老客户</dt>
                <el-radio-group size="mini" v-model="searchParma.if_old_customer" @change="addChoose('frequenter')">
                  <el-radio :label="item" v-for="(item, index) in frequenterList" :key="index">{{ item }}</el-radio>
                </el-radio-group>
              </dl>
            </li>
            <li>
              <h3></h3>
              <dl>
                <dt>数据来源</dt>
                <el-radio-group size="mini" v-model="searchParma.source" @change="addChoose('sourceArr')">
                  <el-radio :label="item" v-for="(item, index) in comBaseData.source_arr" :key="index">{{ item }}</el-radio>
                </el-radio-group>
              </dl>
            </li>
          </div>
        </div>
        <li class="hidden">
          <h3>废旧物资类型：</h3>
          <dl class="wasteTypeList">
            <dd v-for="(item, index) in wasteTypeList" :key="index" :class="wasteTypeIsactive == index ? 'active' : ''" @click="addChoose('wasteType', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <li class="hidden">
          <h3>设备品类：</h3>
          <dl class="equipmentCategoryList">
            <dd v-for="(item, index) in equipmentCategoryList" :key="index" :class="equipmentCategoryIsactive == index ? 'active' : ''" @click="addChoose('equipmentCategory', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <li v-if="chooseArray.length > 0">
          <h3>筛选条件：</h3>
          <div class="condition">
            <div class="condition_item" v-for="(item, index) in chooseArray" :key="index">
              <strong>{{ item.typeName }}:</strong>
              <span>{{ item.name }}</span>
              <a @click="addChoose('cancel', index, item.typeName)"><i class="el-icon-close"></i></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="resource">
      <p>
        客户数据：<em>{{ totalPage }}</em
        >条
      </p>
      <div>
        <el-button size="mini" type="primary" @click="outboundCall()">AI外呼</el-button>
        <el-button size="mini" type="primary" disabled>加企微</el-button>
        <el-button size="mini" type="primary" @click="textMessage()">短信</el-button>
        <el-button size="mini" type="primary" disabled>邮件</el-button>
        <el-button size="mini" type="primary" disabled>会员推送</el-button>
        <el-button size="mini" type="danger" disabled>踢出</el-button>
      </div>
    </div>
    <!--数据信息-->
    <div class="dataInfo">
      <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column align="center" header-align="center" label="联系人" prop="boss_name" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="200"></el-table-column>
        <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
        <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="200"></el-table-column>
        <el-table-column align="center" header-align="center" label="公司类型" prop="company_type" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" header-align="center" label="所在省" prop="sheng" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="所在市" prop="shi" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="经营状态" prop="opera_sts" width="200"></el-table-column>
        <el-table-column align="center" header-align="center" label="客户类型" prop="customer_type" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.customer_type == 1">普通</span>
            <span v-else-if="scope.row.customer_type == 2">意向</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="创建人" prop="created_user" width="150"></el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" v-if="Jurisdictionlist.indexOf('CustomerPoolDetail') > -1" @click="detail(scope)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
    <!--新建外呼任务-->
    <el-dialog title="新建外呼任务" :visible.sync="outboundCallVisible" width="50%">
      <el-form size="mini" :model="form" :rules="rules" ref="form">
        <el-form-item label="外呼任务标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off" maxlength="20" show-word-limit placeholder="请输入外呼任务标题"></el-input>
          <div class="tip">
            <i class="el-icon-warning-outline"></i>
            标题请以外呼类型（资产、回收、造粒厂、制品厂）加‘-’为开头，未添加类型将归为资产类型
          </div>
        </el-form-item>
        <el-form-item label="话术模板" :label-width="formLabelWidth" prop="robotDefId">
          <el-select v-model="form.robotDefId" placeholder="请选择话术模板">
            <el-option v-for="item in AITemplate" :key="item.robotDefId" :label="item.name" :value="item.robotDefId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务开始时间" :label-width="formLabelWidth" prop="start_time">
          <el-date-picker v-model="form.start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"> </el-date-picker>
        </el-form-item>
        <el-form-item label="任务坐席数" :label-width="formLabelWidth" prop="site_num">
          <el-input-number v-model="form.site_num" controls-position="right" :min="1" :step="1" :precision="0" :controls="false" :max="AIMax" :placeholder="AIzxPl"></el-input-number>
        </el-form-item>
        <el-form-item label="短信模板" :label-width="formLabelWidth" prop="sms_id">
          <el-select v-model="form.sms_id" placeholder="请选择短信模板">
            <el-option v-for="item in smsTemplate" :key="item.sms_id" :label="item.sms_name" :value="item.sms_id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型" :label-width="formLabelWidth" prop="sts">
          <el-radio-group v-model="form.sts">
            <el-radio :label="1">中废通SAM</el-radio>
            <el-radio :label="2">中废通智能</el-radio>
            <el-radio :label="3">企业名录</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="outboundCallReset('form')">取 消</el-button>
        <el-button size="mini" type="primary" :loading="false" @click="outboundCallSubmit('form')" :disabled="isdisabled">确 定</el-button>
      </div>
    </el-dialog>
    <!--新建短信群发-->
    <el-dialog title="新建短信群发" :visible.sync="textMessageVisible" width="50%">
      <el-form size="mini" :model="tmForm" :rules="tmRules" ref="tmForm">
        <el-form-item label="任务标题" :label-width="tmFormLabelWidth" prop="title">
          <el-input v-model="tmForm.title" autocomplete="off" maxlength="20" show-word-limit placeholder="请输入任务标题"></el-input>
        </el-form-item>
        <el-form-item label="短信模板" :label-width="tmFormLabelWidth" prop="sms_id">
          <el-select v-model="tmForm.sms_id" placeholder="请选择短信模板">
            <el-option v-for="item in smsTemplate" :key="item.sms_id" :label="item.sms_name" :value="item.sms_id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满足条件的用户则" :label-width="tmFormLabelWidth" prop="cate" class="delayBlock">
          <el-select v-model="tmForm.cate" placeholder="请选择">
            <el-option v-for="item in select1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-input-number v-model="tmForm.number" controls-position="right" :min="1" :step="1" :precision="0"></el-input-number>
          <el-select v-model="tmForm.term" placeholder="请选择">
            <el-option v-for="item in select2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="textMessageReset('tmForm')">取 消</el-button>
        <el-button size="mini" type="primary" @click="textMessageSubmit('tmForm')" :disabled="isdisabled">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer title="客户详情" :visible.sync="showDrawer" size="80%">
      <popup v-if="showDrawer" :id="currentId" />
    </el-drawer>
  </div>
</template>

<script>
import { comBaseApi, comCityApi, companyInfoListApi } from '@/api/customer'
import { apiUserDeptShow } from '@/api/outboundCall'
import { smsAllModelApi, smsTaskAddApi } from '@/api/message'
import { AITaskAddApi, AIBaseInfoApi } from '@/api/outboundCall'
import popup from '../components/popupDetail.vue'
export default {
  name: 'index',
  components: { popup },
  data() {
    return {
      hiddenCity: false,
      isdisabled: false,
      addressHeight: '51px',
      industryClassHeight: '51px',
      isShowIndustryClass: false,
      isShowAddress: false,
      isShowAdvanced: true,
      txtKey: '',
      company_phone: '',
      searchParma: {
        first_class: '不限',
        sheng: '不限',
        register_num: '不限',
        register_cap: '不限',
        opera_sts: '不限',
        company_type: '不限',
        if_old_customer: '不限',
        source: '不限',
      },
      frequenterList: ['不限', '是', '否'], //老客
      type: [],
      // 行业分类
      iCisactive: 0,
      // 所在地区
      addRessIsactive: 0,
      //所在市
      addCityactive: 0,
      wasteTypeIsactive: 0,
      equipmentCategoryIsactive: 0,
      //选中筛选数据
      chooseArray: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      areaCitiesDate: [], //所在市级
      Jurisdictionlist: [], // 权限列表
      comBaseData: [], //筛选数据源
      // AI外呼
      outboundCallVisible: false,
      form: {
        title: '',
        robotDefId: '',
        start_time: '',
        site_num: undefined,
        sms_id: '',
        user_id: '',
        sts: 1,
      },
      formLabelWidth: '120px',
      rules: {
        title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
        robotDefId: [{ required: true, message: '请选择话术模板', trigger: 'change' }],
        start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
      },
      AITemplate: [],
      AIMax: 1,
      AIzxPl: '任务最大坐席数为1',
      //短信
      tmFormLabelWidth: '140px',
      textMessageVisible: false,
      tmForm: {
        title: '',
        sms_id: '',
        cate: '1',
        number: 10,
        term: '1',
      },
      tmRules: {
        title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
        sms_id: [{ required: true, message: '请选择短信模版', trigger: 'change' }],
      },
      smsTemplate: [],
      userList: [],
      select1: [
        {
          value: '1',
          label: '延迟',
        },
        {
          value: '2',
          label: '立即执行',
        },
      ],
      select2: [
        {
          value: '1',
          label: '分钟',
        },
        {
          value: '2',
          label: '天',
        },
      ],
      showDrawer: false,
      currentId: '',
      wasteTypeList: ['不限', '整场拆除', '废纸', '电子废类', '报废设备', '化工废料', '废塑料', '废钢铁', '电线电缆'],
      equipmentCategoryList: [
        '不限',
        '拆除',
        '物资处理',
        '废纸处理',
        '电子废类处理',
        '报废汽车拆解',
        '零件翻新工具',
        '预处理设备',
        '物理化学处理设备',
        '生物处理设备',
        '深度处理设备',
        '污泥处理设备',
        '辅助设备与系统',
        '监测设备',
        '分类与分选设备',
        '清洗设备',
        '破碎设备',
        '再生造粒设备',
        '成型设备',
        '热裂解设备',
        '其它辅助设备',
        '分拣设备',
        '除锈设备',
        '破碎设备',
        '搬运设备',
        '清洗剥皮设备',
        '废铜废铝处理设备',
      ],
    }
  },
  mounted() {
    this.getDataList()
    // 处理权限
    this.Jurisdictionlist = JSON.parse(localStorage.getItem('jurisdiction'))[this.$route.path] || []
    this.getComBase()
    this.getSmsAll()
    this.getUserList()
    this.getAITempalteAll()
  },
  methods: {
    //手机号是能是数字
    formatInput(value) {
      return value.replace(/^[1-9]\d*$/, '')
    },
    //点击行业分类展开
    highToggleIndustryClass() {
      this.isShowIndustryClass = !this.isShowIndustryClass
    },
    //点击所在地区展开
    showAddress(e) {
      console.log(e)
      this.isShowAddress = !this.isShowAddress
    },
    // 行业分类悬浮展开收起
    onHoverIndustryClass(e) {
      let industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].children.length
      if (industryClassHeight > 10) {
        this.industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].clientHeight + 'px'
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.add('el-icon-caret-top')
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.remove('el-icon-caret-bottom')
      }
    },
    onLeaveIndustryClass(e) {
      let industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].children.length
      if (industryClassHeight > 10) {
        this.industryClassHeight = '51px'
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.add('el-icon-caret-bottom')
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.remove('el-icon-caret-top')
      }
    },
    // 所在地区悬浮展示收起
    onHover(e) {
      let addressList = e.currentTarget.getElementsByClassName('addressList')[0].children.length
      if (addressList > 10) {
        this.addressHeight = e.currentTarget.getElementsByClassName('addressList')[0].clientHeight + 'px'
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.add('el-icon-caret-top')
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.remove('el-icon-caret-bottom')
      }
    },
    onLeave(e) {
      let addressList = e.currentTarget.getElementsByClassName('addressList')[0].children.length
      if (addressList > 10) {
        this.addressHeight = '51px'
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.add('el-icon-caret-bottom')
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.remove('el-icon-caret-top')
      }
    },
    //高级筛选展开收起
    highToggle() {
      this.isShowAdvanced = !this.isShowAdvanced
    },
    //筛选点击事件
    addChoose(type, index, item) {
      this.chooseArray.forEach((item, index) => {
        if (item.type == type) {
          this.chooseArray = this.chooseArray.filter((item) => {
            return item.type !== type
          })
        }
      })
      if (type == 'industryClass') {
        this.iCisactive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'industryClass',
            typeName: '行业分类',
            name: item,
            value: item,
          })
        }
        this.searchParma.first_class = item
      } else if (type == 'address') {
        this.addRessIsactive = index
        if (item != '不限') {
          this.hiddenCity = true
          this.initAreaCities(item)
          this.chooseArray.push({
            type: 'address',
            typeName: '所在地区',
            name: item,
            value: item,
          })
        } else {
          this.hiddenCity = false
        }
        this.chooseArray = this.chooseArray.filter((item) => item.type !== 'areaCities')
        this.searchParma.shi = '不限'
        this.addCityactive = 0
        this.searchParma.sheng = item
      } else if (type == 'areaCities') {
        this.addCityactive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'areaCities',
            typeName: '所在市级',
            name: item,
            value: item,
          })
        }
        this.searchParma.shi = item
      } else if (type == 'registerNum') {
        if (this.searchParma.register_num != '不限') {
          this.chooseArray.push({
            type: 'registerNum',
            typeName: '成立年限',
            name: this.searchParma.register_num,
            value: this.searchParma.register_num,
          })
        }
      } else if (type == 'registerCap') {
        if (this.searchParma.register_cap != '不限') {
          this.chooseArray.push({
            type: 'registerCap',
            typeName: '注册资本',
            name: this.searchParma.register_cap,
            value: this.searchParma.register_cap,
          })
        }
      } else if (type == 'operaSts') {
        if (this.searchParma.opera_sts != '不限') {
          this.chooseArray.push({
            type: 'operaSts',
            typeName: '经营状态',
            name: this.searchParma.opera_sts,
            value: this.searchParma.opera_sts,
          })
        }
      } else if (type == 'companyType') {
        if (this.searchParma.company_type != '不限') {
          this.chooseArray.push({
            type: 'companyType',
            typeName: '公司类型',
            name: this.searchParma.company_type,
            value: this.searchParma.company_type,
          })
        }
      } else if (type == 'frequenter') {
        if (this.searchParma.if_old_customer != '不限') {
          this.chooseArray.push({
            type: 'frequenter',
            typeName: '老客户',
            name: this.searchParma.if_old_customer,
            value: this.searchParma.if_old_customer,
          })
        }
      } else if (type == 'sourceArr') {
        if (this.searchParma.source != '不限') {
          this.chooseArray.push({
            type: 'sourceArr',
            typeName: '数据来源',
            name: this.searchParma.source,
            value: this.searchParma.source,
          })
        }
      } else if (type == 'cancel') {
        this.chooseArray.splice(index, 1)
        if (item == '行业分类') {
          this.searchParma.first_class = '不限'
          this.iCisactive = 0
        } else if (item == '所在地区') {
          this.searchParma.sheng = '不限'
          this.addRessIsactive = 0
        } else if (item == '所在市级') {
          this.searchParma.shi = '不限'
          this.addCityactive = 0
        } else if (item == '成立年限') {
          this.searchParma.register_num = '不限'
        } else if (item == '注册资本') {
          this.searchParma.register_cap = '不限'
        } else if (item == '经营状态') {
          this.searchParma.opera_sts = '不限'
        } else if (item == '公司类型') {
          this.searchParma.company_type = '不限'
        } else if (item == '老客户') {
          this.searchParma.if_old_customer = '不限'
        } else if (item == '数据来源') {
          this.searchParma.source = '不限'
        } else if (item == '废旧物资类型') {
          this.searchParma.waste_type = '不限'
          this.wasteTypeIsactive = 0
        } else if (item == '设备品类') {
          this.searchParma.equipment_category = '不限'
          this.equipmentCategoryIsactive = 0
        }
      } else if (type == 'wasteType') {
        this.wasteTypeIsactive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'wasteType',
            typeName: '废旧物资类型',
            name: item,
            value: item,
          })
        }
        this.searchParma.waste_type = item
      } else if (type == 'equipmentCategory') {
        this.equipmentCategoryIsactive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'equipmentCategory',
            typeName: '设备品类',
            name: item,
            value: item,
          })
        }
        this.searchParma.equipment_category = item
      }
      this.getDataList()
    },
    // 获取市级数据
    initAreaCities(item) {
      const formData = new FormData()
      formData.set('name', item)
      comCityApi(formData)
        .then((res) => {
          this.areaCitiesDate = res.data.city_arr
        })
        .catch((e) => {
          this.areaCitiesDate = []
        })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize, title: this.txtKey, company_phone: this.company_phone }, this.searchParma)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      companyInfoListApi(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 提交搜索
    searchBtn() {
      this.pageIndex = 1
      let search = {
        first_class: '不限',
        sheng: '不限',
        shi: '不限',
        register_num: '不限',
        register_cap: '不限',
        company_type: '不限',
        opera_sts: '不限',
        title: this.txtKey,
        company_phone: this.company_phone,
        if_old_customer: '不限',
        source: '不限',
        pageNumber: this.pageIndex,
        pageSize: this.pageSize,
      }
      if (this.chooseArray.length > 0) {
        for (var i = 0; i < this.chooseArray.length; i++) {
          if (this.chooseArray[i].type == 'registerCap') {
            search.register_cap = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'industryClass') {
            search.first_class = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'address') {
            search.sheng = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'areaCities') {
            search.shi = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'operaSts') {
            search.opera_sts = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'registerNum') {
            search.register_num = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'companyType') {
            search.company_type = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'frequenter') {
            search.if_old_customer = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'sourceArr') {
            search.source = this.chooseArray[i].value
          }
        }
      }

      const formData = new FormData()
      for (let key in search) {
        formData.set(key, search[key])
      }
      companyInfoListApi(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },

    // 获取数据列表
    getComBase() {
      comBaseApi()
        .then((res) => {
          this.comBaseData = res.data
        })
        .catch((e) => {
          this.comBaseData = []
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    //详情
    detail(scope) {
      this.currentId = scope.row.id
      this.showDrawer = true
    },
    //AI外呼
    outboundCall() {
      this.outboundCallVisible = true
    },
    // 获取所有话术模板
    getAITempalteAll() {
      AIBaseInfoApi()
        .then((res) => {
          this.AITemplate = res.data.talk_words
          //任务坐席最大数
          this.AIMax = res.data.max_site_num
          this.AIzxPl = '任务最大坐席数为' + res.data.max_site_num
        })
        .catch((e) => {
          this.AITemplate = []
        })
    },
    //新建外呼任务提交
    outboundCallSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.form)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          // 武振鹏23-08-09开始
          let search = { first_class: '不限', sheng: '不限', shi: '不限', register_num: '不限', register_cap: '不限', company_type: '不限', opera_sts: '不限', title: this.txtKey, company_phone: this.company_phone, if_old_customer: '不限', source: '不限' }
          if (this.chooseArray.length > 0) {
            for (var i = 0; i < this.chooseArray.length; i++) {
              if (this.chooseArray[i].type == 'registerCap') {
                search.register_cap = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'industryClass') {
                search.first_class = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'address') {
                search.sheng = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'areaCities') {
                search.shi = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'operaSts') {
                search.opera_sts = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'registerNum') {
                search.register_num = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'companyType') {
                search.company_type = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'frequenter') {
                search.if_old_customer = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'sourceArr') {
                search.source = this.chooseArray[i].value
              }
            }
          }
          formData.set('search', JSON.stringify(search))
          // 武振鹏23-08-09结束
          this.isdisabled = true
          AITaskAddApi(formData)
            .then((res) => {
              this.outboundCallReset('form')
              this.$message({
                message: '新建外呼任务成功',
                type: 'success',
              })
              this.isdisabled = false
            })
            .catch((e) => {
              this.isdisabled = false
            })
        } else {
          return false
        }
      })
    },
    //取消
    outboundCallReset(formName) {
      this.$refs[formName].resetFields()
      this.outboundCallVisible = false
    },
    //短信
    textMessage() {
      this.textMessageVisible = true
    },
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.textMessageVisible = false
    },
    textMessageSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.tmForm)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          let search = { first_class: '不限', sheng: '不限', shi: '不限', register_num: '不限', register_cap: '不限', company_type: '不限', opera_sts: '不限', title: this.txtKey, company_phone: this.company_phone, if_old_customer: '不限', source: '不限' }
          if (this.chooseArray.length > 0) {
            for (var i = 0; i < this.chooseArray.length; i++) {
              if (this.chooseArray[i].type == 'registerCap') {
                search.register_cap = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'industryClass') {
                search.first_class = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'address') {
                search.sheng = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'areaCities') {
                search.shi = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'operaSts') {
                search.opera_sts = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'registerNum') {
                search.register_num = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'companyType') {
                search.company_type = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'frequenter') {
                search.if_old_customer = this.chooseArray[i].value
              }
              if (this.chooseArray[i].type == 'sourceArr') {
                search.source = this.chooseArray[i].value
              }
            }
          }
          formData.set('search', JSON.stringify(search))
          this.isdisabled = true
          smsTaskAddApi(formData)
            .then((res) => {
              this.textMessageReset('tmForm')
              this.$message({
                message: '新建短信群发成功',
                type: 'success',
              })
              this.isdisabled = false
            })
            .catch((e) => {
              this.isdisabled = false
            })
        } else {
          return false
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    // 获取所有短信模板
    getSmsAll() {
      smsAllModelApi()
        .then((res) => {
          this.smsTemplate = res.result
        })
        .catch((e) => {
          this.smsTemplate = []
        })
    },
    // 获取联系人
    getUserList() {
      apiUserDeptShow()
        .then((res) => {
          this.userList = res.data
        })
        .catch((e) => {
          this.userList = []
        })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #f0f1f4;
  padding: 16px;
  box-sizing: border-box;
}
.chooseSel,
.dataInfo {
  width: 100%;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 4px;
}
.chooseSel .search {
  margin-bottom: 16px;
}
.chooseSel ul {
  border: 1px solid #e2e2e2;
  padding: 0;
  margin: 0;
}
.chooseSel li {
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  //height: 51px;
  min-height: 51px;
  height: auto;
  overflow: hidden;
  -webkit-transition: height 0.25s;
  -moz-transition: height 0.25s;
  -ms-transition: height 0.25s;
  -o-transition: height 0.25s;
}
.chooseSel li h3 {
  width: 100px;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  background: #f9f9f9;
  color: #333333;
  font-weight: bold;
  font-size: 12px;
  margin: 0;
  line-height: 30px;
}
.chooseSel li dl {
  width: 87%;
  font-size: 0;
  padding: 10px 10px;
  display: table;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.chooseSel .advanced_screen li dl {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}
.chooseSel li dl dd {
  display: inline-block;
  margin: 0 10px 0 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  color: #333333;
}
.chooseSel li dl dd a,
.chooseSel li dl dd span {
  padding: 6px;
  margin-bottom: 10px;
  display: inline-block;
}
.chooseSel li dl dd.active a,
.chooseSel li dl dd.active span {
  background: #2c68ff;
  border-radius: 2px;
  color: #fff;
}
.chooseSel li dl dt {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  color: #333333;
  width: 60px;
}
.chooseSel li dl dd.active a {
  color: #fff;
}
.chooseSel li p {
  text-align: center;
  width: 30px;
  color: #666666;
  cursor: pointer;
  margin: 0;
}
.chooseSel li dl dt {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  color: #333333;
  line-height: 20px;
}
.condition {
  display: flex;
  align-items: center;
  margin-left: 12px;
}
.condition .condition_item {
  border: 1px dashed #2c68ff;
  color: #2c68ff;
  padding: 5px 10px;
  position: relative;
  margin-right: 10px;
}
.condition .condition_item strong {
  font-weight: 100;
}
.condition .condition_item i {
  position: absolute;
  right: -6px;
  top: -10px;
  background: #2c68ff;
  color: #fff;
  border-radius: 50%;
  font-weight: 100;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
}
.el-radio,
.el-checkbox {
  margin-right: 30px;
  line-height: 30px;
}
.el-radio-group {
  vertical-align: revert;
  flex: 1;
}
::v-deep .el-radio__label,
::v-deep .el-checkbox__label {
  font-size: 12px;
}
.resource {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.resource p {
  color: #333333;
}
.resource p em {
  color: #2c68ff;
  font-style: normal;
}
.el-date-editor.el-input,
.el-input-number,
.el-select {
  width: 100%;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .delayBlock .el-form-item__content {
  display: flex;
}
::v-deep .delayBlock .el-form-item__content .el-input-number {
  margin: 0 20px;
}
.tip {
  font-size: 12px;
}
</style>
